<script setup lang="ts">
import EgButton from "./components/eg-button/eg-button.vue";
import {ref} from "vue";
import egTheme from "./conf/EgTheme.ts";
import Eg_button_group from "./components/eg-button/eg_button_group.vue";
const theme = ref(egTheme.themeList)
function handleClick(){
  console.log("click")
}
</script>

<template>
<div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
  <h3>按钮(主题色\小尺寸)</h3>
  <div  v-for="item in theme">
    <eg-button size="small" :type="item">Eg_button</eg-button>
  </div>
</div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
  <h3>按钮(尺寸\中等尺寸)</h3>
  <div  v-for="item in theme">
    <eg-button size="medium" :type="item">Eg_button</eg-button>
  </div>
  </div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
  <h3>按钮(尺寸\大尺寸)</h3>
  <div  v-for="item in theme">
    <eg-button size="large" :type="item">Eg_button</eg-button>
  </div>
  </div>

  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
    <h3>按钮(虚线边框)</h3>
    <div  v-for="item in theme">
      <eg-button dashed size="small" :type="item">Eg_button</eg-button>
    </div>
  </div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
    <h3>按钮(ghost)</h3>
    <div  v-for="item in theme">
      <eg-button ghost dashed size="small" :type="item">Eg_button666</eg-button>
    </div>
  </div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
    <h3>按钮(圆角)</h3>
    <div  v-for="item in theme">
      <eg-button ghost dashed size="small" :round="10" :type="item">Eg_button666</eg-button>
    </div>
  </div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
    <h3>按钮(圆形)</h3>
    <div  v-for="item in theme">
      <eg-button v-ripple="{backgroundColor: '#1e9fff'}" @click="handleClick" ghost dashed size="small" circle :type="item">Eg_button666</eg-button>
    </div>
  </div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
    <h3>按钮(文本按钮)</h3>
    <div  v-for="item in theme">
      <eg-button @click="handleClick" ghost dashed size="small"  :type="item" text>Eg_button666</eg-button>
    </div>
  </div>
  <div style="display: flex;justify-content: flex-start;align-items: center; gap: 10px">
    <h3>按钮组</h3>
    <eg_button_group>
      <eg-button   ghost dashed size="large" type="primary">Eg_button666</eg-button>
      <eg-button ghost dashed size="small" type="primary">Eg_button666</eg-button>
    </eg_button_group>
  </div>
</template>

<style scoped>

</style>
